<template>
  <div class="step-list">
    <div class="step-list-item" v-for="(item, index) in stepList" :key="index">
      <div class="startTime" :style="{'--bgColor': bgColorFn()}"><span class="right12">{{ item.startTime }} {{ item.staffName }}</span> 
      </div>
      <div class="context">备注：{{ item.context || '暂无说明信息' }}</div>
      <div class="img-box">
        <template v-if="item.imgList && item.imgList.length && item.state != '10002'">
          <img v-for="(file, i) in item.imgList" :src="file.filePath" alt="图片异常" :key="i">
        </template>
        <template v-else-if="item.state == '10002'">
          <span class="inLable">维修前图片:</span>
          <div class="img-container">
            <img :src="file.filePath" mode="widthFix" v-for="(file, i) in preImg" :key="i" />
          </div>
          <span class="inLable">维修后图片:</span>
          <div class="img-container">
            <img :src="file.filePath" mode="widthFix" v-for="(file, i) in afterImg" :key="i" />
          </div>
        </template>
        <el-empty v-else description="暂无图片" :image-size="60"></el-empty>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props: ['stepList', 'preImg', 'afterImg'],
    data() {
      return {
      }
    },
    computed: {
      theme() {
        return this.$store.state.settings.theme;
      },
    },
    methods: {
      bgColorFn() {
        let bgColor =  `linear-gradient(to right, ${this.transferColor(this.theme, 1)}, ${this.transferColor(this.theme, 0.8)}, ${this.transferColor(this.theme, 0.7)})`
        return bgColor
      },
    },
  }
</script>

<style lang="scss" scoped>
.step-list {
  width: 480px;
  max-width: 100%;
  margin: 0 auto;
  background: #fff;
  .step-list-item {
    width: 100%;
    min-height: 100px;
    position: relative;
    margin-bottom: 40px;
    box-shadow: 0 0 6px var(--shadow-color);
    border-radius: 5px;
    font-size: 14px;
    &::before {
      content: "";
      position: absolute;
      display: inline-block;
      width: 8px;
      height: 8px;
      left: -50px;
      border-radius: 50%;
      background: var(--current-color);
    }
    &::after {
      content: "";
      height: 100%;
      display: inline-block;
      position: absolute;
      top: 24px;
      left: -47px;
      width: 2px;
      background: #eee;
    }

    .startTime {
      padding: 8px 12px;
      line-height: 28px;
      color: #fff;
      word-spacing: 4px;
      display: flex;
      background: var(--bgColor);
    }
    .context {
      padding: 8px 12px;
      line-height: 28px;
      color: #666;
      margin-bottom: 12px;
    }
    .img-box {
      padding: 8px 12px;
      .inLable{
        color: #000;
        font-size: 16px;
        display: block;
      }
      .img-container {
        padding: 12px;
        min-height: 100px;
        display: flex;
        color: #fff;
        margin-bottom: 12px;
        flex-wrap: wrap;
        img {
          width: 80px;
          height: 100px;
          border-radius: 4px;
          margin-right: 12px;
          margin-bottom: 12px;
        }

        .el-empty {
          padding: 0;
          margin: 0 auto;

          ::v-deep .el-empty__description p {
            color: #eae8e8 !important;
          }
        }
      }
    }
  }
}
</style>